<template>
  <div class="container">
    <header>
      <!-- 我们希望把页头放这里 -->
      <slot name="a1"
            :user1="user"></slot>
    </header>
    <main>
      <!-- 我们希望把主要内容放这里 -->
      <slot :user2="user"></slot>
    </main>
    <footer>
      <!-- 我们希望把页脚放这里 -->
      <slot name="a2"
            :sendUser="user"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        name: 'zhangsan',
        age: 19
      }
    }
  }

}
</script>

<style lang="less" scoped>
header {
  height: 200px;
  background: red;
}
main {
  height: 200px;
  background: green;
}
footer {
  height: 200px;
  background: pink;
}
</style>